import { shallowRef } from 'vue'

import { useClipboard } from '@vueuse/core'


import type { Meta, StoryObj } from '@storybook/vue3-vite';

const meta = {
  title: 'Hook/vueuse/useClipboard',
  tags: ['autodocs'],
  args: {},
} satisfies Meta<typeof useClipboard>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  name: '基础用法',
  args: {
    ...meta.args,
  },
  render: () => ({
    setup() {
      const source = ref('Hello')
      const { text, copy, copied, isSupported } = useClipboard({ source })
      return { source, text, copy, copied, isSupported }
    },
    template: `
      <input v-model="source" placeholder="Copy this text" />
      <div v-if="isSupported">
        <button @click="copy(source)">Button: click this to copy
          <span v-if="!copied">Copy</span>
          <span v-else>Copied!</span>
        </button>
        <p>Current copied: <code>{{ text || 'none' }}</code></p>
      </div>
      <p v-else>
        Your browser does not support Clipboard API
      </p>
    `
  })
};